<script setup>
import { computed, onBeforeUnmount } from "vue";
import { VideoPlay } from "@element-plus/icons-vue";
const props = defineProps(["noteVideos"])
const videoDom = ref(null)

const videos = computed(() => {
  return props.noteVideos.map((img) => BucketURL + '/note-videos/' + img)
})

// 弹窗
const isShow = ref(false)
const videoSrc = ref('')
// 点击视频就弹窗
const videoClick = (src) => {
  videoSrc.value = src
  isShow.value = true
}
// 点击背景就关闭弹窗
const maskClick = () => {
  videoDom.value.pause();
  isShow.value = false
}



onBeforeUnmount(() => {
  console.log(videoDom.value)
})
</script>

<template>
  <!-- 不用来播放 -->
  <div class="videos">
    <div v-for="video in videos" :key="video" @click="videoClick(video)"
      style="display: inline-block;position: relative;">
      <video none>
        <!--  
              autoplay 自动开始播放 controls 显示播放器控件
              poster 视频封面 loop 循环播放
              muted 默认静音 preload 页面加载时加载，并预备播放
              none:播放前不会预先下载视频资源，用户不点击播放时会省宽带；
              metadata:播放前不会下载视频资源，但是会获取资源的元数据；
              auto:根据实际情况动态决定
            -->
        <source :src="video" type="video/mp4">
      </video>
      <VideoPlay class="video-play" />
    </div>
  </div>
  <!-- 真正用来播放的 -->
  <teleport to="body" v-if="isShow">
    <div class="mask" @click.self="maskClick">
      <video controls autoplay ref="videoDom">
        <source :src="videoSrc" type="video/mp4">
      </video>
    </div>
  </teleport>
</template>

<style scoped lang="less">
.videos {
  // border: 1px solid red;
  display: inline-block;
  white-space: nowrap;
  overflow-x: auto;
  max-width: 100%;

  video {
    border: 1px solid var(--model-border-color);
    border-radius: 5px;
    object-fit: cover;
    height: 90px;
    width: 90px;
    margin-right: 1px;
  }

  // 图标
  .video-play {
    position: absolute;
    opacity: 0.5;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
  }

  video:hover+.video-play,
  .video-play:hover {
    opacity: 1;
  }
}

.mask {
  // 背景遮罩
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; // 可以实现全屏
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99; // 最顶

  video {
    position: absolute; // 这三行实现窗口居中
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    // width: 100%;
  }
}
</style>